<!-- vue所有api测试 -->
<template>
    <el-container style="background-color: #fff;">
        <el-main>
            <el-button @click="handleToggleAll">全部{{ store.getCollapseAllState?'折叠':'展开' }}</el-button>
            <el-collapse ref="collapseRef" v-model="activeNames" @change="handleCollapseChange">
                <el-collapse-item v-for="(value,key,index) of components" :key="key" :title="index+1+'、'+key" :name="key">
                    <component :is='value'></component>
                </el-collapse-item>
            </el-collapse>
        </el-main>
    </el-container>
</template>

<script setup>
import { onMounted, ref, version } from 'vue'
import components from './components/index.js'
import { useVueApisCollapseStore } from '@/stores/vueApisCollapse.js'

const store = useVueApisCollapseStore()
const activeNames = ref([])
console.log('version:' + version);

const collapseRef = ref(null)
onMounted(() => {
    activeNames.value = store.getActiveNames
})

const handleCollapseChange = (val) => {
    store.setActiveNames(val)
}

const handleToggleAll = () => {
    const collapseNameList = Object.keys(components)

    const state = store.getCollapseAllState
    store.setCollapseAllState(!state)

    const names = !state ? collapseNameList : []
    activeNames.value = names
    store.setActiveNames(names)
}
</script>

<style scoped>
:deep(.el-collapse-item__header) {
    font-size: 20px;
    font-weight: 700;
}
:deep(h3) {
    color: red;
}
</style>

